<template>
  <div class="m-main-holder-info">
    <div class="select-box flex-between">
      <span>{{holderInfo.symbol}}{{$t('rank.title')}}</span>
      <div>
        <i class="iconfont iconshaixuan"></i>
        <div style="display:inline-block">
          <div>
            <label>范围</label>
            <el-select
              v-model="num"
              placeholder="请选择"
              size="mini"
              class="holder-range"
              @change="selectRange"
            >
              <el-option :label="`${$t('rank.best')} 10`" :value="10"></el-option>
              <el-option :label="`${$t('rank.best')} 20`" :value="20"></el-option>
              <el-option :label="`${$t('rank.best')} 30`" :value="30"></el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <div class="chart-container table-shadow">
      <div class="head">
        <div class="flex-left">
          <i class="iconfont iconyonghu"></i>
          {{$t('rank.topHolder',[num,(holdTotal*100/holderInfo.total).toFixed(8).slice(0,-6)+'%',$store.state.baseCoin])}}
        </div>
        <div class="total">
          <i class="iconfont iconjiangzhang"></i>
          <div class="total-text">
            <p>{{$t('rank.totalTip')}}：{{parseInt(holderInfo.total)}} {{$t('rank.token')}}</p>
            <p>{{$t('rank.holderTip')}}：{{holderInfo.holders}}</p>
          </div>
        </div>
      </div>
      <div class="chart-box">
        <div class="hold-chart" id="myChart"></div>
        <p>{{holderInfo.symbol}}</p>
      </div>
      <div
        class="tip"
      >{{$t('rank.ps',[num,filterNum((holdTotal).toFixed(4)),filterNum(holderInfo.total)])}}</div>
    </div>
  </div>
</template>

<script>
import HolderInfoBase from "@/mixins/Holder/mainInfo.js";
import { filterNum } from "@/utils/filters";
export default {
  mixins: [HolderInfoBase],
  methods: {
    filterNum(num) {
      return filterNum(num);
    }
  }
};
</script>

<style lang="scss" scoped>
.m-main-holder-info {
  position: relative;
  .tip {
    padding: 0 20px;
    position: absolute;
    top: 425px;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: $font_grey;
  }
  .select-box {
    margin-bottom: 10px;
    .iconshaixuan {
      display: inline-block;
      vertical-align: top;
      margin-top: 6px;
    }
    .type {
      margin-top: 10px;
    }
    span {
      font-size: 16px;
      font-family: PingFangSC-Semibold;
      font-weight: 500;
      color: $black;
    }
    i {
      margin-left: 30px;
      color: $grey_deep;
    }
    label {
      margin: 0 14px 0 10px;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: $black;
    }
    .holder-range {
      width: 105px;
    }
  }
  .chart-container {
    margin-top: 10px;
    // padding: 13px;
    background: $white;
    border: 1px solid rgba(235, 239, 241, 1);
    .head {
      padding: 13px;
      border-bottom: 1px solid #eeeeee;
      .flex-left {
        color: $black;
        font-size: 12px;
        i {
          margin-right: 10px;
          color: $grey_deep;
          font-size: 20px;
        }
      }
      .total {
        margin-top: 8px;
        color: $black;
        font-size: 12px;
        i {
          margin-right: 10px;
          color: $grey_deep;
          font-size: 20px;
          display: inline-block;
          vertical-align: top;
        }
        .total-text {
          display: inline-block;
          vertical-align: top;
        }
      }
    }
    .chart-box {
      position: relative;
      p {
        width: 100%;
        position: absolute;
        top: 120px;
        color: $black;
        text-align: center;
        font-size: 19px;
        font-weight: 600;
      }
    }
    .hold-chart {
      height: 625px;
    }
  }
}
</style>